<template>
    <div class="four-boxes-container">
        <div v-for="(box, index) in boxes" :key="index" class="box" :class="`box-${index+1}`">
            <h3>{{ box.title }}</h3>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue'

    export default {
        name: 'FourBoxes',
        setup() {
            const boxes = ref([
                { title: '框 1' },
                { title: '框 2' },
                { title: '框 3' },
                { title: '框 4' }
            ])

            return {
                boxes
            }
        }
    }
</script>

<style scoped>
    .four-boxes-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        width: 100%;
        height: 100px;
        margin-bottom: 10px;
    }

    .box {
        border: 5px solid #999;
        text-align: center;
        line-height: 90px;
        box-sizing: border-box;
        background: linear-gradient(135deg, #6a89cc, #4a69bd);
        color: white;
        font-size: 28px;
        font-weight: bold;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        border-radius: 8px;
    }

    /* 可以为每个框设置不同的背景色 */
    .box-1 {
        background: linear-gradient(135deg, #ff9a9e, #fad0c4);
    }

    .box-2 {
        background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
    }

    .box-3 {
        background: linear-gradient(135deg, #ffecd2, #fcb69f);
    }

    .box-4 {
        background: linear-gradient(135deg, #84fab0, #8fd3f4);
    }

    /* 响应式设计：在小屏幕上变为2x2网格 */
    @media (max-width: 768px) {
        .four-boxes-container {
            grid-template-columns: repeat(2, 1fr);
            height: auto;
        }
        .box {
            line-height: 70px;
            height: 80px;
        }
    }

    /* 在更小的屏幕上变为1x4垂直堆叠 */
    @media (max-width: 480px) {
        .four-boxes-container {
            grid-template-columns: 1fr;
        }
    }
</style>